<template>
  <div class="already-vote">
    <head-top head-title="已投票详情" goBack="true"></head-top>
    <!--满意度投票-->
    <div class="already_main" v-if="pageType === 'statisticsd'">
      <div class="areas-name border-bottom">
        <span>小区名称：{{$route.params.name}}</span>
      </div>
      <div class="areas_number border-bottom">
        <div class="all_count">
          <span>总户数：<span style="color: #0078de;">{{houseNum}}户</span></span>
        </div>
        <div class="count">
          <span>已投户数：<span style="color: #0078de; font-size: 14px">{{intelList.length + phoneList.length + recycleList.length}}户</span></span>
        </div>
        <div class="pre_count">
          <span>百分比：<span style="color: #0078de">{{percentage}}%</span></span>
        </div>
      </div>
      <ul class="navbar">
        <li class="nav-item" v-for="(item, index) in dataList" :key="index" @click="showContainer(index)"><span
          :class="{'item': i===index}">{{item.name}}({{item.count || 0}})</span></li>
      </ul>
      <div class="already">
        <div class="vote-wrapper" v-show="i === 0">
          <!-- <div class="text border-bottom" @click="intelItem">
            <span>网络投票</span>
            <span class="arrow">{{intelList.length}}票&nbsp;＞</span>
          </div> -->
          <transition name="item">
            <ul class="toupiao-wrapper">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in intelList" :key="key">
                <div class="left">{{item.areasName}}</div>
                <div class="right">
                  <div class="yi-color">已投</div>
                  <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
        <div class="vote-wrapper" v-show="i === 1">
          <!-- <div class="text border-bottom" @click="recycleItem">
            <span>现场回收</span>
            <span class="arrow">{{recycleList.length}}票&nbsp;＞</span>
          </div> -->
          <transition name="item">
            <ul class="toupiao-wrapper">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in phoneList" :key="key">
                <div class="left">{{item.areasName}}</div>
                <div class="right">
                  <div class="yi-color">已投</div>
                  <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
        <div class="vote-wrapper" v-show="i === 2">
          <!-- <div class="text border-bottom" @click="otherItem">
            <span>其他投票</span>
            <span class="arrow">{{otherList.length}}票&nbsp;＞</span>
          </div> -->
          <transition name="item">
            <ul class="toupiao-wrapper">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in recycleList" :key="key">
                <div class="left">{{item.areasName}}</div>
                <div class="right">
                  <div class="yi-color">已投</div>
                  <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
      </div>
    </div>

    <!--网络投票-->
    <div class="new_layout" v-if="pageType === 'statistics'">
      <div class="village_info">
        <div class="info_box">小区名称：<span>{{villageName}}</span></div>
        <div class="info_box">总户数：<span>{{formData.houseNum}}户</span></div>
      </div>
      <div class="layout">
        <div class="infeed">
          <div class="infeed_left infeedbox"><span>已投户数</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.voteHouseNum}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.percentage}}</span></div>
        </div>
        <div class="infeed" style="background: #f2f2f2">
          <div class="infeed_left infeedbox"><span>1.现场票(已回收)</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.recoveryVote}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.recoveryVotePercentage}}</span></div>
        </div>
        <div class="infeed">
          <div class="infeed_left infeedbox"><span>已送票</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.recoveryVoteSend}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.recoveryVoteSendPercentage}}</span></div>
        </div>
        <!--<div class="infeed">
          <div class="infeed_left infeedbox"><span>已回收</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.recoveryVoteBack}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.recoveryVoteBackPercentage}}</span></div>
        </div>-->
        <div class="infeed" style="background: #f2f2f2">
          <div class="infeed_left infeedbox"><span>2.网络投票</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.totalIntelVote}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.totalIntelVotePercentage}}</span></div>
        </div>
        <div class="infeed">
          <div class="infeed_left infeedbox"><span>邻里网投</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.intelVote}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.intelVotePercentage}}</span></div>
        </div>
        <div class="infeed">
          <div class="infeed_left infeedbox"><span>舒心住网投</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.fangbaoVote}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.fangbaoVotePercentage}}</span></div>
        </div>
        <div class="infeed" style="background: #f2f2f2">
          <div class="infeed_left infeedbox"><span>3.电话投票</span></div>
          <div class="infeed_center infeedbox"><span>{{formData.phoneVote}}</span></div>
          <div class="infeed_right infeedbox"><span>{{formData.phoneVotePercentage}}</span></div>
        </div>
      </div>
      <div class="remarks">
        <p><span>已投户数</span>=1.现场投票+2.网络投票+3.电话投票</p>
        <p><span>网络投票</span>=邻里网投+舒心住网投</p>
      </div>
    </div>

  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import {alreadyVoteDetail, lookAlreadySat} from '../../api/toupiaotongji'
  import {Toast} from 'mint-ui'
  // import { lookAlreadyVote, alreadyVoteDetail, lookAlreadySat } from '../../api/toupiaotongji.js'

  export default {
    name: 'AlreadyVote',
    data () {
      return {
        i: 0,
        houseNum: '',
        percentage: '',
        formData: {}, // 网络投票表格数据
        intelList: [],
        recycleList: [],
        phoneList: [],
        dataList: [{name: '网络投票'}, {name: '电话投票'}, {name: '现场票'}],
        pageType: '',
        villageName: '' // 小区名
      }
    },
    components: {
      headTop
    },
    created () {
      // console.log(this.$route.params)
      this.villageName = this.$route.params.name
      // 存页面类型
      this.pageType = this.$route.params.page
      this._lookAlreadyVote()
    },
    methods: {
      _lookAlreadyVote () {
        // 网络投票点击已投票显示的数据
        if (this.pageType === 'statistics') {
          // newold: 区分新老版本投票
          alreadyVoteDetail(this.$route.params.aid, this.$route.params.vid, this.$route.params.newold).then(res => {
            // console.log(res)
            if (res.code === 200) {
              this.formData = res.data
              // console.log(this.formData)
            } else if (res.code === 400) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              return
            }
          })
          // lookAlreadyVote(this.$route.params.aid, this.$route.params.vid).then(res => {
          //   if (res.code === 200) {
          //     this.houseNum = res.data.houseNum
          //     this.percentage = res.data.percentage
          //     this.intelList = res.data.intelVote // 网络
          //     this.recycleList = res.data.recoveryVote // 现场
          //     this.phoneList = res.data.phoneVote // 电话
          //     var currentLength = [this.intelList.length, this.phoneList.length, this.recycleList.length]
          //     this.dataList.forEach((item, index) => {
          //       this.$set(item, 'count', currentLength[index])
          //     })
          //     this.intelList.forEach(item => {
          //       this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
          //     })
          //     this.recycleList.forEach(item => {
          //       this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
          //     })
          //     this.phoneList.forEach(item => {
          //       this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
          //     })
          //   }
          // })
        } else if (this.pageType === 'statisticsd') { // 满意度调查点击已投票显示的数据
          lookAlreadySat(this.$route.params.aid, this.$route.params.vid, this.$route.params.newold).then(res => {
            if (res.code === 200) {
              this.houseNum = res.data.houseNum
              this.percentage = res.data.percentage
              this.intelList = res.data.intelVote // 网络
              this.recycleList = res.data.recoveryVote // 现场
              this.phoneList = res.data.phoneVote // 电话
              var currentLength = [this.intelList.length, this.phoneList.length, this.recycleList.length]
              this.dataList.forEach((item, index) => {
                this.$set(item, 'count', currentLength[index])
              })
              this.intelList.forEach(item => {
                this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
              })
              this.recycleList.forEach(item => {
                this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
              })
              this.phoneList.forEach(item => {
                this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
              })
            }
          })
        }
      },
      showContainer (index) {
        this.i = index
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        window.pageYOffset = 0
      }
    }
  }
</script>

<style lang="scss">
  .already-vote {
    padding-top: 40px;
    .already_main{
      .navbar {
        position: fixed;
        top: 115px;
        left: 0;
        z-index: 2;
        width: 100%;
        /*display: flex;*/
        /*display: -webkit-box;*/
        /*display: -moz-box;*/
        /*display: -ms-flexbox;*/
        /*display: -webkit-flex;*/
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-bottom: 2px solid #f2f2f2;
        .nav-item {
          width: 33%;
          /*flex: 1;*/
          height: 100%;
          text-align: center;
          display: inline-block;
          font-size: 13px;
          .item {
            display: inline-block;
            /*display: -webkit-box;*/
            /*display: -moz-box;*/
            /*display: -ms-flexbox;*/
            /*display: -webkit-flex;*/
            height: 100%;
            padding: 0 10px;
            border-bottom: 2px solid #0078de;
            color: #0078de;
            width: 84%;
          }
        }
      }
      .areas-name {
        background: #fff;
        width: 100%;
        position: fixed;
        top: 40px;
        left: 0;
        display: flex;
        padding: 0px 10px;
        box-sizing: border-box;
        height: 35px;
        line-height: 35px;
        color: #666;
        z-index: 2;
        span {
          flex: 1;
          font-size: 13px;
        }
      }
      .areas_number {
        background: #fff;
        width: 100%;
        height: 40px;
        position: fixed;
        top: 75px;
        left: 0;
        z-index: 2;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        line-height: 40px;
        .all_count {
          flex: 1;
          font-size: 13px;
          padding-left: 10px;
        }
        .count {
          flex: 1;
          font-size: 13px;
          text-align: center;
        }
        .pre_count {
          flex: 1;
          font-size: 13px;
          text-align: center;
        }
      }
      .already {
        margin-top: 125px;
        .vote-wrapper {
          .toupiao-wrapper {
            -webkit-overflow-scrolling: touch;
            .tou-wrapper {
              margin: 0 10px;
              height: 44px;
              line-height: 44px;
              font-size: 14px;
              .left {
                display: inline;
                text-align: left;
              }
              .right {
                text-align: right;
                position: relative;
                top: -42px;
                height: 44px;
                input[type='checkbox'] {
                  display: none
                }
                label {
                  position: absolute;
                  right: -8px;
                  top: 12px;
                }
                label:before {
                  content: '';
                  position: absolute;
                  left: -30px;
                  top: 0;
                  width: 16px;
                  height: 16px;
                  border: 1px solid #ddd;
                  border-radius: 50%;
                  transition: all 0.3s ease;
                  -webkit-transition: all 0.3s ease;
                  -moz-transition: all 0.3s ease;
                }
                label:after {
                  content: '';
                  position: absolute;
                  left: -23px;
                  top: 3px;
                  width: 4px;
                  height: 10px;
                  border: 0;
                  border-right: 1px solid #fff;
                  border-bottom: 1px solid #fff;
                  background: #fff;
                  transform: rotate(45deg);
                  transition: all 0.3s ease;
                }
                input[type='checkbox']:checked + label:before {
                  background: #0087de;
                  border-color: #0087de;
                }
                input[type='checkbox']:checked + label:after {
                  background: #0087de;
                }
                .yi-color {
                  margin-right: 25px;
                }
              }
            }
          }
        }
      }
    }
    .new_layout{
      padding: 10px;
      .village_info{
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        font-size: 14px;
        .info_box{
          span{
            color: #0078de;
          }
        }
      }
      .layout{
        border: 1px solid #c2c2c2;
        .infeed{
          width: 100%;
          display: inline-flex;
          align-items: center;
          border-bottom: 1px solid #c2c2c2;
          .infeedbox{
            width: 33%;
            padding: 10px 0;
            span{
              margin-left: 10px;
              font-size: 14px;
            }
          }
        }
        .infeed_left, .infeed_center{
          border-right: 1px solid #c2c2c2;
        }
        .infeed:last-child{
          border-bottom: none;
        }
      }
      .remarks{
        margin-top: 10px;
        p{
          font-size: 14px;
          line-height: 25px;
          span{
            font-weight: bolder;
          }
        }
      }
    }
  }
</style>

